<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>找回密码</title>
    <link rel="icon" th:href="@{images/favicon.ico}">
    <link rel="stylesheet" th:href="@{lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{js/lay-module/step-lay/step.css}" media="all">
    <style>
        tip {
            margin-top: 10px;
            line-height: 10px;
            font-size: 10px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">账号:</label>
                                        <div class="layui-input-block">
                                            <input type="text" placeholder="请填写要找回的账号" class="layui-input"
                                                   lay-verify="required" name="username"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">真实姓名:</label>
                                        <div class="layui-input-block">
                                            <input type="text" placeholder="请填写姓名" name="aName" class="layui-input"
                                                   lay-verify="required"   />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">证件号码:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="aCid" placeholder="请填写身份证" class="layui-input"
                                                    lay-verify="identity|required"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <a th:href="@{/login}" class="layui-btn layui-btn-primary">
                                                &emsp;返回&emsp;
                                            </a>
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" for="password">新密码:</label>
                                        <div class="layui-input-block">
                                            <input type="password" id="password" name="password"
                                                   lay-verify="required|password"
                                                   lay-reqtext="新密码不能为空"
                                                   placeholder="请输入新密码" class="layui-input">
                                            <tip id="msg" style="color: red;display: none"></tip>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" for="newPassword">确认新密码:</label>
                                        <div class="layui-input-block">
                                            <input type="password" id="newPassword" name="again_password"
                                                   lay-verify="required"
                                                   lay-reqtext="确认新密码不能为空"
                                                   placeholder="请确认新密码" class="layui-input">
                                            <tip id="nMsg" style="color: red;display: none">两次密码不一致</tip>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button id="btn-submit" class="layui-btn" lay-submit lay-filter="formStep2">找回密码
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        找回成功
                                    </div>
                                    <div style="font-size: 14px;color: #666;margin-top: 20px;">请前往登录</div>
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn next">前往登录</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
                        <h3>说明</h3><br>
                        <h4>请填写真实资料</h4>
                        <p>资料不真实可能会导致找回密码失败哦</p>
                        <br><h4>有问题请联系管理员</h4>
                        <p>管理员QQ：1299466140</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
<script th:inline="javascript">
    // 获取前面的路径
    var ctxPath = [[@{/}]];
        layui.use(['form', 'step'], function () {
            var $ = layui.$,
                form = layui.form,
                step = layui.step;
            step.render({
                elem: '#stepForm',
                filter: 'stepForm',
                width: '100%', //设置容器宽度
                stepWidth: '750px',
                height: '500px',
                stepItems: [{
                    title: '填写绑定的信息'
                }, {
                    title: '填写要更改密码'
                }, {
                    title: '完成'
                }]
            });

            var id = 0;

            //判断绑定的信息，正确就下一步，错误就提示
            form.on('submit(formStep)', function (data) {
                console.log(data.field);
                var url = ctxPath + 'user/findPwd';
                $.post(url, data.field, function (response) {
                    //信息和数据库匹配成功，跳到下一步
                    if (response.code == 0) {
                        step.next('#stepForm');
                        id = response.data;
                        console.log(id)
                        return id;
                    } else {
                        //信息和数据库匹配失败，提示错误
                        layer.alert(response.message, {icon: 5, anim: 6});
                    }
                });
                return false;
            });

            //填写新密码，成功找回密码，失败提示
            form.on('submit(formStep2)', function (data) {
                //点击找回按钮后禁用
                $("#btn-submit").attr("disabled", "disabled").addClass("layui-btn-disabled");
                var url = ctxPath + 'user/updatePwd/' + id;
                data.field._method = 'put';
                $.post(url, data.field, function (response) {
                    if (response.code == 0) {
                        //密码找回成功，跳转到完成
                        step.next('#stepForm');
                    }else {
                        //密码找回失败
                        //失败后取消禁用
                        $("#btn-submit").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled");
                        layer.alert(response.message, {icon: 5, anim: 6});
                }
                });
                return false;
            });

            //返回
            $('.pre').click(function () {
                step.pre('#stepForm');
            });

            //去登录页面
            $('.next').click(function () {
               window.location= ctxPath + 'login';
            });
        });
</script>
<script>


    var pwd = document.getElementById("password");
    var nPwd = document.getElementById("newPassword");
    var nMsg = document.getElementById("nMsg");
    var msg = document.getElementById("msg");
    //密码验证
    pwd.onblur = function () {
        if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(pwd.value)) {
            $("#btn-submit").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled");
            msg.style.display = "none";
            nPwdV();
        } else {
            msg.style.display = "block";
            $("#btn-submit").attr("disabled", "disabled").addClass("layui-btn-disabled");
            msg.innerText = "密码至少包含 数字和英文，长度6-20";
            return false;
        }

    };
    // //密码改变消失
    // pwd.oninput = function () {
    //     if (pwd.value != null) {
    //         $("#btn-submit").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled");
    //         msg.style.display = 'none';
    //     }
    // };
    //确认两次密码是否一样判断
    function nPwdV() {
        nPwd.onblur = function () {
            //不一样
            if (pwd.value != nPwd.value) {
                nMsg.style.display = 'block';
                $("#btn-submit").attr("disabled", "disabled").addClass("layui-btn-disabled");
                return false;
            }
            //一样
            if (pwd.value == nPwd.value && /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(pwd.value)) {
                $("#btn-submit").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled");
                nMsg.style.display = 'none';
            }
        };
    }
</script>
</body>
</html>
